<template>
  <div>
    <!-- 设备/部件类型信息 -->
    <div class="basic-information">
      <div class="title-text">设备/部件类型信息</div>
      <div class="information-item">
        <span>设备类型ID：{{ equipData.id }}</span>
        <span>设备/部件类型名称：{{ equipData.typeName }}</span>
        <span>简称：{{ equipData.typeName }}</span>
        <span>编号：{{ equipData.typeName }}</span>
      </div>
    </div>

    <!-- table区域-begin -->
    <div class="table-list">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :md="6" :sm="24">
              <a-form-item label="数据类型ID">
                <j-input placeholder="请输入数据类型ID" v-model="queryParam.id"></j-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="数据类型名称">
                <j-input placeholder="请输入数据类型名称" v-model="queryParam.dataTypeName"></j-input>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery">查询</a-button>
                <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="addOrEdit()">关联/新增数据类型</a-button>
      </div>
      <a-tabs :default-active-key="defaultActive" @change="tabsChange">
        <a-tab-pane key="RUN" tab="运行数据">
          <a-table
            ref="table"
            size="middle"
            :scroll="{ x: true }"
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            @change="handleTableChange"
            class="j-table-force-nowrap"
          >
            <span slot="action" slot-scope="text, record">
              <a @click="addOrEdit(record)">编辑</a>
              <a-divider type="vertical" />
              <a-popconfirm
                title="确定删除吗?"
                @confirm="() => handleDelete(record.id)"
                placement="topLeft"
              >
                <a style="color:#E83A3A">删除</a>
              </a-popconfirm>
            </span>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="BASIC" tab="基础数据">
          <a-table
            ref="table"
            size="middle"
            :scroll="{ x: true }"
            rowKey="id"
            :columns="basicColumns"
            :dataSource="dataSource"
            :pagination="ipagination"
            class="j-table-force-nowrap"
          >
            <span slot="action" slot-scope="text, record">
              <a @click="addOrEdit(record)">编辑</a>
              <a-divider type="vertical" />
              <a-popconfirm
                title="确定删除吗?"
                @confirm="() => handleDelete(record.id)"
                placement="topLeft"
              >
                <a style="color:#E83A3A">删除</a>
              </a-popconfirm>
            </span>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </div>
    <j-modal
      :title="flag?'编辑':'添加'"
      :width="600"
      :visible="addVisible"
      :switchFullscreen="false"
      @ok="handleOk"
      @cancel="addVisible = false"
      cancelText="关闭"
    >
      <a-form-model
        ref="form"
        :model="model"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :rules="validatorRules"
      >
        <a-form-model-item label="数据类别" prop="category">
          <a-radio-group v-model="model.category">
            <a-radio value="RUN">运行数据</a-radio>
            <a-radio value="BASIC">基础数据</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="数据类型名称" prop="dataTypeName">
          <a-input v-model="model.dataTypeName" placeholder="请输入数据类型名称"></a-input>
        </a-form-model-item>
        <a-form-model-item v-if="model.category == 'BASIC'" label=" 默认数据值" prop="defaultValue">
          <a-input v-model="model.defaultValue" placeholder="请输入默认数据值"></a-input>
        </a-form-model-item>
        <a-form-model-item label="数据类型单位" prop="unit">
          <a-input v-model="model.unit" placeholder="请输入数据类型单位"></a-input>
        </a-form-model-item>
      </a-form-model>
    </j-modal>
  </div>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction, postAction, deleteAction } from '../../api/manage'
export default {
  name: 'dataTypeManager',
  mixins: [JeecgListMixin],
  props: {
    equipData: {
      type: Object
    }
  },
  components: {
  },
  data() {
    return {
      defaultActive: 'RUN',
      model: {
        category: '',
        dataTypeName: '',
        unit: '',
        defaultValue: ''
      },
      flag:1,
      labelCol: { span: 6 },
      wrapperCol: { span: 12 },
      validatorRules: {
        category: [
          { required: true, message: '请选择数据类别!' },
        ],
        dataTypeName: [
          { required: true, message: '请输入数据类型名称!' },
        ],
        defaultValue: [
          { required: true, message: '请输入默认数据值!' },
        ]
      },
      // 表头
      columns: [

        {
          title: 'ID',
          align: "center",
          dataIndex: 'id',
          width: 167

        },
        {
          title: '数据类型名称',
          align: "center",
          dataIndex: 'dataTypeName'
        },
        {
          title: '数据类别',
          align: "center",
          dataIndex: 'category'
        },
        {
          title: '单位',
          align: "center",
          dataIndex: 'unit'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 147,
          scopedSlots: { customRender: 'action' },
        }


      ],
      basicColumns: [

        {
          title: 'ID',
          align: "center",
          dataIndex: 'id',
          width: 167

        },
        {
          title: '数据类型名称',
          align: "center",
          dataIndex: 'dataTypeName'
        },
        {
          title: '数据类别',
          align: "center",
          dataIndex: 'category'
        },
        {
          title: '默认数据值',
          align: "center",
          dataIndex: 'defaultValue'
        },
        {
          title: '单位',
          align: "center",
          dataIndex: 'unit'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 147,
          scopedSlots: { customRender: 'action' },
        }


      ],
      addVisible: false,
      url: {
        list: "/basic/gdDeviceDataType/list",
        delete: "/basic/gdDeviceDataType/delete"
      },
      disableMixinCreated: true
    }
  },
  created() {
    this.queryParam.typeId = this.equipData.id
    this.queryParam.category = this.defaultActive
    this.loadData(1)

  },
  computed: {

  },
  methods: {
    handleReset() {
      this.queryParam = {
        typeId: this.equipData.id,
        category: this.defaultActive

      }
      this.loadData(1)

    },
    addOrEdit(record) {
      this.addVisible = true
      if (record) {
        this.flag = 1
        let { category, dataTypeName, unit, defaultValue, typeId, id } = record
        this.model.category = category
        this.model.dataTypeName = dataTypeName
        this.model.unit = unit
        this.model.defaultValue = defaultValue
        this.model.typeId = typeId
        this.model.id = id
      } else {
        this.flag = 0
        this.model = {
          category: this.defaultActive,
          dataTypeName: '',
          unit: '',
          typeId: '',
          id: '',
          defaultValue: ''
        }
      }

    },
    // 保存
    handleOk() {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log('确定', this.model)
          this.model.typeId = this.equipData.id
          postAction(`/basic/gdDeviceDataType/${this.model.id ? 'edit' : 'add'}`, this.model).then((res) => {
            if (res && res.code == 200) {
              // console.log('请求成功 :>> ', res);
              this.$message.success(res.message)
              this.loadData(1)

              this.addVisible = false
              this.$refs.form.resetFields()
            } else {
              this.$message.error(res.message)

            }
          })
        }
      })
    },
    tabsChange(val) {
      this.defaultActive = val
      this.ipagination.current = 1;
      this.queryParam.category = this.defaultActive
      this.loadData(1)
    }
  }
}
</script>
<style scoped lang="less">
@import "~@assets/less/common.less";

.basic-information {
  padding: 0 0 40px 0;
  border-bottom: 1px solid #ccc;
}

.title-text {
  font-size: 16px;
  color: #000;
  font-weight: 700;
  margin-bottom: 20px;
}

.information-item {
  display: flex;
  justify-content: space-between;
}

.table-list {
  margin-top: 20px;
}
</style>